<script setup>
import {useRouter} from 'vue-router';
import AdminManagement from './AdminManagement.vue';
import DormitoryManagement from './DormitoryManagement.vue';
import MapManagement from './MapManagement.vue';
import ScholarshipManagement from './ScholarshipManagement.vue';
import UserManagement from './UserManagement.vue';
import OrganizationManagement from "@/components/Admin/OrganizationManagement.vue";
import ProfessionalManagement from "@/components/Admin/ProfessionalManagement.vue";

// 定义组件数组
const components = [
  {
    name     : 'Admin Management',
    component: AdminManagement,
    image    : "",
    size     : 'large'
  },
  {
    name     : 'Dormitory Management',
    component: DormitoryManagement,
    size     : 'small'
  },

];

// 定义组件数组
const components2 = [
  {
    name     : 'Map Management',
    component: MapManagement,
    size     : 'medium'
  },
  {
    name     : 'Organization Management',
    component: OrganizationManagement,
    size     : 'medium'
  },
];

// 定义组件数组
const components3 = [
  {
    name     : 'Professional Management',
    component: ProfessionalManagement,
  },
  {
    name     : 'Scholarship Management',
    component: ScholarshipManagement,
  },
  {
    name     : 'User Management',
    component: UserManagement,
  },

];

// 路由实例
const router = useRouter();

// 跳转到指定组件
function navigateTo(component) {
  router.push({name: component.replace(/ /g, '')});
}
</script>

<template>
  <div style="display:flex;">
    <div class="card-container">
      <div
          class="card"
          style="width: 450px;;height: 80%"
          v-for="(card, index) in components"
          :key="index"
          :class="card.size"
          @click="navigateTo(card.name)"
      >
        <div class="card-title">{{ card.name }}</div>
        <div class="card-content">
          <p>这是有关{{ card.name }}的内容</p>
        </div>
      </div>
    </div>
    <div class="card-container2">
      <div
          class="card"
          style="width: 400px;;min-height: 170px"
          v-for="(card, index) in components2"
          :key="index"
          :class="card.size"
          @click="navigateTo(card.name)"
      >
        <div class="card-title">{{ card.name }}</div>
        <div class="card-content">
          <p>这是有关{{ card.name }}的内容</p>
        </div>
      </div>
    </div>
  </div>
  <div class="card-container3" style="margin-top: -60px">
    <div
        class="card"
        style="width: 445px;;height: 42%;"
        v-for="(card, index) in components3"
        :key="index"
        :class="card.size"
        @click="navigateTo(card.name)"
    >
      <div class="card-title">{{ card.name }}</div>
      <div class="card-content">
        <p>这是有关{{ card.name }}的内容</p>
      </div>
    </div>
  </div>

</template>

<style scoped>
.card-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  gap: 16px;
  height: 50vh;
  padding: 16px;
  box-sizing: border-box;
}

.card-container2 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 50%;
  padding: 16px;
  box-sizing: border-box;
}

.card-container3 {
  min-width: 1200px;
  display: flex; 
  gap: 16px; 
  height: 100vh; 
  padding: 16px; 
  box-sizing: border-box; 
}

.card {
  background-color: #fff; 
  border: 1px solid #ddd; 
  border-radius: 8px; 
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); 
  padding: 16px; 
  cursor: pointer; 
  transition: transform 0.3s ease; 
  overflow: hidden; 
}

.card:hover {
  transform: scale(1.05); 
}

.card-title {
  font-weight: bold;
  margin-bottom: 8px; 
}

.card-content {
  font-size: 14px; 
}
</style>
